<template>
  <a-layout-sider width="230px" v-model="collapsed"  style="background: #fff">
    <div class="logo">
      <a-icon type="file"></a-icon>
      <span>公司文件系统</span>
    </div>
    <a-menu mode="inline" theme = "light">
      <a-menu-item v-for="item in this.sideMenu" :key="item.name" @click="menuJump(item)">
        <a-icon :type="item.meta.icon"/>
        <span>{{item.meta.title}}</span>
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>

<script>
  import {ROUTE} from "../store/mutation-types";
  import Vue from 'vue'
  export default {
    name: "Sider",
    props:['collapsed'],
    data() {
      return {
        sideMenu:[],
      };
    },
    mounted() {
      this.sideMenu = this.generateSideMenu(Vue.ls.get(ROUTE));
    },
    methods:{
      menuJump(item){
        if(item.meta.title==="项目源码"){
           window.open(item.path)
        }else{
          this.$router.push(item.path)
        }
      },
      generateSideMenu(routeList){
        let sideMenu = [];
        for(let i=0;i<routeList.length;i++){
          if(routeList[i]["name"]=="layout"){
            sideMenu.push(...routeList[i]["children"])
          }
        }
        for(let i=0;i<sideMenu.length;i++){
           if(sideMenu[i].name == "error"){
             sideMenu.splice(i,1);
           }
        }
        sideMenu.push({
          path:'https://gitee.com/xiaohufight/my-admin-template',
          name:'source',
          meta:{
            title:'项目源码',
            icon:'gift',
          }
        });
        return sideMenu
      }
    }
  };
</script>

<style scoped>
  .logo {
    height: 64px;
    background:#1890ff;
    text-align: center;
    color: white;
    font-size: 20px;
    font-weight: bold;
    verticle-align:middle;
    line-height: 64px;
    .span{
      width:50%;
    }
  }
</style>
